<script>
import { dictMixin } from '@/mixin/dict'

export default {
  name: 'OperateCarbonEmissionDataActivityDetail',
  mixins: [dictMixin],
  props: {
    // 请求参数
    requestParams: {
      type: Object,
      default: () => ({})
    },
    // 弹窗数据
    popData: {
      type: Object,
      default: () => ({})
    },
    // 弹窗配置
    popConfig: {
      type: Object,
      default: () => ({})
    },
    // 弹窗取消
    close: {
      type: Boolean,
      default: false
    },
    // 弹窗确认
    confirm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {},
      detailData: {}
    }
  },
  watch: {
    popData: {
      async handler(data) {
        this.formData = data
        const detailRes = await this.$api.carbonEmissionDataActivity.detail(data.activityCarbonEmissionId, data.solidifyDate)
        this.detailData = detailRes.data
        console.log(this.detailData)
      },
      deep: true,
      immediate: true
    },
    confirm() {

    }
  }
}
</script>

<template>
  <div>
    <el-descriptions>
      <el-descriptions-item label="数据时间">{{ formData.solidifyDate }}
      </el-descriptions-item>
      <el-descriptions-item label="活动名称">{{ formData.activityCarbonEmissionName }}</el-descriptions-item>
      <el-descriptions-item label="碳排放总量（kgCO2）">
        {{ detailData.total }}
      </el-descriptions-item>
    </el-descriptions>
    <div>
      <h3>关联设备：</h3>
      <el-table :data="detailData.deviceList">
        <el-table-column label="所属项目">
          <template #default="{row}">{{ formData.projectName }}</template>
        </el-table-column>
        <el-table-column prop="sceneInfoName" label="所属场景">
        </el-table-column>
        <el-table-column prop="deviceCode" label="设备编号"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称"></el-table-column>
        <el-table-column prop="energyTypeName" label="能源种类"></el-table-column>
        <el-table-column prop="staticsTypeName" label="统计类型"></el-table-column>
        <el-table-column prop="meterValue" label="计量值"></el-table-column>
        <el-table-column prop="energyTypeUnit" label="单位"></el-table-column>
        <el-table-column prop="carbonEmission" label="碳排放量（kgCO2）"></el-table-column>
      </el-table>
    </div>
    <div v-if="detailData.activityType === '2'">
      <h3>关联绿化：</h3>
      <el-table :data="detailData.relatedGreeningList">
        <el-table-column label="所属项目">
          <template #default="{row}">{{ formData.projectName }}</template>
        </el-table-column>
        <el-table-column prop="sceneInfoName" label="所属场景"></el-table-column>
        <el-table-column prop="typeName" label="绿化名称"></el-table-column>
        <el-table-column prop="carbonSinkIdName" label="种植方式"></el-table-column>
        <el-table-column prop="area" label="面积（㎡）"></el-table-column>
        <el-table-column prop="carbonEmission" label="碳汇量（kgCO2）"></el-table-column>
      </el-table>
    </div>
    <div>
      <h3>外购碳汇：</h3>
      <el-table :data="detailData.dataFillList">
        <el-table-column label="所属项目">
          <template #default="{row}">{{ formData.projectName }}</template>
        </el-table-column>
        <el-table-column prop="sceneInfoName" label="所属场景"></el-table-column>
        <el-table-column prop="outsourcedCarbonSinks" label="碳汇量（kgCO2）"></el-table-column>
      </el-table>
    </div>
    <div>
      <h3>其它：</h3>
      <el-table :data="detailData.otherList">
        <el-table-column label="所属项目">
          <template #default="{row}">{{ formData.projectName }}</template>
        </el-table-column>
        <el-table-column prop="sceneInfoName" label="所属场景">
        </el-table-column>
        <el-table-column prop="energyTypeName" label="能源种类"></el-table-column>
        <el-table-column prop="usageValue" label="用值"></el-table-column>
        <el-table-column prop="energyTypeUnit" label="单位"></el-table-column>
        <el-table-column prop="carbonEmission" label="碳排放量（kgCO2）"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
